<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import request from '../api/request'

const router = useRouter()
const activeRole = ref('customer')
const formRef = ref()

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const roleOptions = [
  { label: '客户', value: 'customer' },
  { label: '员工', value: 'employee' }
]

const handleLogin = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    const url = activeRole.value === 'customer' ? '/customer/login' : '/employee/login'
    const res = await request({
      url,
      method: 'post',
      data: loginForm
    })
    
    if (res.data) {
      localStorage.setItem('token', res.data)
      ElMessage.success('登录成功')
      router.push(`/${activeRole.value}/home`)
    }
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error(error.message || '登录失败，请重试')
  }
}

// 打字机效果变量
const loginTips = [
  '📅 MeetKey 议启，让每场沟通都事半功倍',
  '✅ 您的专属议事厅已准备就绪',
  '⌚️ 每个重要时刻，MeetKey准时守候',
  '💡 从空间预约到头脑风暴的无缝衔接',
  '📈 重新定义高效会议空间管理',
  '🛡️ 安全可靠的会议保障',
  '👀 智能化的会议室管理',
  '🎸 让每次会议都完美进行'
]
const currentText = ref('')
const currentTipIndex = ref(0)
const isTyping = ref(true)
let typingTimer = null

const typeText = () => {
  const currentTip = loginTips[currentTipIndex.value]
  const targetLength = isTyping.value ? currentTip.length : 0
  
  if (isTyping.value && currentText.value.length < targetLength) {
    // 正在输入中
    currentText.value = currentTip.substring(0, currentText.value.length + 1)
    typingTimer = setTimeout(typeText, 50)
  } else if (!isTyping.value && currentText.value.length > 0) {
    // 正在删除中
    currentText.value = currentText.value.substring(0, currentText.value.length - 1)
    typingTimer = setTimeout(typeText, 30)
  } else if (isTyping.value) {
    // 输入完成，等待一会后开始删除
    isTyping.value = false
    typingTimer = setTimeout(typeText, 2000)
  } else {
    // 删除完成，切换到下一条提示
    currentTipIndex.value = (currentTipIndex.value + 1) % loginTips.length
    isTyping.value = true
    typingTimer = setTimeout(typeText, 500)
  }
}

// 组件挂载时执行
onMounted(() => {
  // 启动打字机效果
  typeText()
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (typingTimer) {
    clearTimeout(typingTimer)
  }
})
</script>

<template>
  <!-- 页面标题 -->
  <div class="page-title">
    <h1>MeetKey | 议启</h1>
    <!-- 打字机效果 -->
    <div class="typewriter-container">
      <span class="typewriter-text">{{ currentText }}</span>
      <span class="cursor" :class="{ 'blink': !isTyping }"></span>
    </div>
  </div>
  <div class="background-container">
    <spline-viewer 
      class="spline-background" 
      :class="{ 'active': activeRole === 'employee' }"
      url="https://prod.spline.design/LbgjCKyERojKlyEs/scene.splinecode"
    ></spline-viewer>
    <spline-viewer 
      class="spline-background" 
      :class="{ 'active': activeRole === 'customer' }"
      url="https://prod.spline.design/6tZW2zt3K7E2gjjN/scene.splinecode"
    ></spline-viewer>
  </div>

  <!-- 右侧/左侧登录区 -->
  <div class="login-right" :class="{ 'move-left': activeRole === 'employee' }">
    <div class="login-form-container">
      <h1 class="login-title">登录</h1>
      <h2 class="login-subtitle">Sign in to Activate Efficiency</h2>
      
      <el-form ref="formRef" :model="loginForm" :rules="rules" class="login-form" @submit.prevent="handleLogin">
        <!-- 角色选择 -->
        <div class="role-selector">
          <div class="role-toggle">
            <input type="radio" id="employee" value="employee" v-model="activeRole" />
            <label for="employee">员工</label>
            <input type="radio" id="customer" value="customer" v-model="activeRole" />
            <label for="customer">客户</label>
            <span class="slider"></span>
          </div>
        </div>
        
        <!-- 用户名输入框 -->
        <el-form-item prop="username">
          <div class="input-wrapper">
            <span class="input-icon">
              <i class="fas fa-user"></i>
            </span>
            <input
              type="text"
              v-model="loginForm.username"
              placeholder="用户名"
              required
            />
          </div>
        </el-form-item>
        
        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <div class="input-wrapper">
            <span class="input-icon">
              <i class="fas fa-lock"></i>
            </span>
            <input
              type="password"
              v-model="loginForm.password"
              placeholder="密码"
              required
            />
          </div>
        </el-form-item>
        
        <!-- 登录按钮 -->
        <el-form-item>
          <button type="submit" class="login-button">
            登录
          </button>
        </el-form-item>
      </el-form>

      <div class="register-section">
        <p>
          没有账号？点击"<a class="register-link" @click="router.push(`/${activeRole}/register`)">注册</a>"使用会议室预订系统
        </p>
      </div>
    </div>
  </div>
  
  <!-- 管理员登录链接 -->
  <div class="admin-login">
    <p>管理员吗？请点击"<a @click="router.push(`/manager/login`)">管理员登录</a>"</p>
  </div>
</template>

<style scoped>
@font-face {
  font-family: 'HYYaKuHei';
  src: url('../assets/fonts/汉仪雅酷黑-85.ttf') format('truetype');
}


.register-section {
  margin-top: 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.register-section p {
  line-height: 1.5;
}

.register-link {
  color: var(--theme-color);
  font-weight: 600;
  cursor: pointer;  /* 添加鼠标指针样式 */
  text-decoration: none;
  transition: all 0.3s ease;
}

.register-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.login-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.login-left {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.spline-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.spline-background.active {
  opacity: 1;
  pointer-events: auto;
}

:root {
  --theme-color: #65a3d5;  /* 默认蓝色 */
}

/* 定义全局主题色变量 */
.login-right {
  --customer-color: #65a3d5;  /* 客户角色的蓝色 */
  --employee-color: #b784a7;  /* 员工角色的粉紫色 */
  --theme-color: var(--customer-color);  /* 默认使用客户色 */
}

/* 当角色为员工时的主题色 */
.login-right.move-left {
  --theme-color: var(--employee-color);
}

.login-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  height: 62%;
  width: 34%;
  right: 15%;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 
    0 8px 32px rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

/* 当为员工角色时，应用此样式将登录框移动到左侧 */
.login-right.move-left {
  right: auto; /* 取消 right 定位 */
  left: 15%;   /* 设置 left 定位到左侧 15% */
}

.login-form-container {
  width: 100%;
}

.login-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;  /* 减小底部间距，为副标题腾出空间 */
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: 'HYYaKuHei', sans-serif;
}

.login-subtitle {
  text-align: center;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 0.5px;
}
.role-selector {
  margin-bottom: 1rem;
}

.role-toggle {
  font-size: 0.9rem;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 4px;
  display: flex;
  width: 160px;
  margin: 0 auto;
}

.role-toggle input[type="radio"] {
  display: none;
}

.role-toggle label {
  position: relative;
  z-index: 1;
  width: 50%;
  padding: 8px 0;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.role-toggle .slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--theme-color);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.role-toggle input[value="customer"]:checked ~ .slider {  /* 修改这里，从 employee 改为 customer */
  transform: translateX(100%);
}

.form-group {
  margin-bottom: 1.5rem;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.input-wrapper input {
  width: 100%;
  padding: 12px 15px 12px 40px;  /* 修改内边距，左侧留出图标空间 */
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input-wrapper input:focus {
  outline: none;
  border-color: var(--theme-color);
  background: rgba(255, 255, 255, 0.15);
}

.input-icon {
  position: absolute;
  left: 15px;  /* 修改为左侧定位 */
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
}

.login-button {
  width: 100%;
  padding: 12px;
  background: var(--theme-color);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.login-button:hover {
  background: var(--theme-color);
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.register-button {
  background: transparent;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
  padding: 10px 30px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.register-button:hover {
  background: var(--theme-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 添加输入框聚焦动画 */
@keyframes input-focus {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.input-wrapper input:focus {
  animation: input-focus 0.3s ease;
}

.page-title {
  position: fixed;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  width: 100%;
}

.page-title h1 {
  color: #ffffff;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-family: 'HYYaKuHei', sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.typewriter-container {
  margin-top: 0.5rem;
}

.typewriter-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
}

.cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: #ffffff;
  margin-left: 2px;
  vertical-align: middle;
}

.cursor.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
  
  /* 管理员登录样式 */
  .admin-login {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
  }
  
  .admin-login p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
  }
  
  .admin-login a {
    color: var(--theme-color);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .admin-login a:hover {
    opacity: 0.8;
    text-decoration: underline;
  }
</style>
